<template>
  <view class="home-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- Tab切换区域（移到顶部） -->
    <view class="tab-section">
      <view 
        class="tab-item" 
        :class="{ 'active': currentTab === 0 }"
        @click="switchTab(0)"
      >
        <text class="tab-text">商品</text>
        <view class="tab-indicator" v-if="currentTab === 0"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ 'active': currentTab === 1 }"
        @click="switchTab(1)"
      >
        <text class="tab-text">商家</text>
        <view class="tab-indicator" v-if="currentTab === 1"></view>
      </view>
    </view>
    
    <!-- 搜索区域（移到Tab下方，优化样式） -->
    <view class="search-section-new">
      <view class="search-box-new" @click="openSearch">
        <text class="search-icon-new">🔍</text>
        <text class="search-placeholder-new">搜索商品或商家</text>
      </view>
    </view>
    
    <!-- Swiper滑动区域 -->
    <swiper 
      class="content-swiper" 
      :current="currentTab" 
      @change="onSwiperChange"
      :duration="300"
    >
      <!-- Tab 1: 商品列表 -->
      <swiper-item>
        <scroll-view class="scroll-content" scroll-y :show-scrollbar="false">
          <!-- 限时秒杀区域 -->
    <view class="flash-sale-section">
      <view class="section-header">
        <text class="section-title">热门商品</text>
        <text class="more-text">更多 →</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text class="loading-text">正在加载商品数据...</text>
      </view>
      
      <!-- 无数据状态 -->
      <view v-else-if="foodList.length === 0" class="empty-container">
        <text class="empty-text">暂无热门商品</text>
      </view>
      
      <view v-else class="food-grid">
        <view 
          class="food-item" 
          v-for="(item, index) in foodList" 
          :key="index"
          @click="handleFoodClick(item)"
        >
          <view class="food-image">
            <image 
              :src="item.image" 
              mode="aspectFill"
              class="food-img"
            />
            <view class="discount-tag" v-if="item.originalPrice && item.price">
              <text class="discount-text">{{ formatDiscount(item) }}</text>
            </view>
          </view>
          <view class="food-info">
            <text class="food-name">{{ item.name }}</text>
            <text class="store-name">{{ item.storeName }}</text>
            <view class="price-section">
              <text class="current-price">¥{{ item.price }}</text>
              <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
            </view>
            <view class="sale-info">
              <text class="sale-count">已售{{ item.sold }}件</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 推荐区域 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">推荐美食</text>
        <text class="more-text">更多 →</text>
      </view>
      
      <!-- 无数据状态 -->
      <view v-if="recommendList.length === 0 && !loading" class="empty-container">
        <text class="empty-text">暂无推荐商品</text>
      </view>
      
      <view v-else class="recommend-list">
        <view 
          class="recommend-item" 
          v-for="(item, index) in recommendList" 
          :key="index"
          @click="handleFoodClick(item)"
        >
          <view class="recommend-image">
            <image 
              :src="item.image" 
              mode="aspectFill"
              class="recommend-img"
            />
            <view class="discount-tag" v-if="item.originalPrice && item.price">
              <text class="discount-text">{{ formatDiscount(item) }}</text>
            </view>
          </view>
          <view class="recommend-info">
            <text class="recommend-name">{{ item.name }}</text>
            <text class="recommend-desc">{{ item.description }}</text>
            <view class="recommend-price">
              <view class="price-wrap">
                <text class="price">¥{{ item.price }}</text>
                <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
              </view>
              <text class="rating">⭐ {{ item.rating }}</text>
            </view>
            <text class="store-name small">{{ item.storeName }}</text>
          </view>
        </view>
      </view>
    </view>
        </scroll-view>
      </swiper-item>
      
      <!-- Tab 2: 商家列表 -->
      <swiper-item>
        <scroll-view 
          class="scroll-content" 
          scroll-y 
          :show-scrollbar="false"
        >
          <view class="merchant-section">
            <view class="section-header">
              <text class="section-title">附近商家</text>
              <text class="more-text">{{ merchantList.length }}家</text>
            </view>
            
            <!-- 加载状态 -->
            <view v-if="loading" class="loading-container">
              <text class="loading-text">正在加载商家数据...</text>
            </view>
            
            <!-- 无数据状态 -->
            <view v-else-if="merchantList.length === 0" class="empty-container">
              <text class="empty-text">暂无商家</text>
            </view>
            
            <!-- 商家列表 -->
            <view v-else class="merchant-list">
              <view 
                class="merchant-card" 
                v-for="(merchant, index) in merchantList" 
                :key="index"
                @click="goToMerchantMenu(merchant)"
              >
                <!-- 商家头部 -->
                <view class="merchant-header">
                  <image 
                    :src="merchant.logo || '/static/default-merchant.jpg'" 
                    mode="aspectFill"
                    class="merchant-logo"
                  />
                  <view class="merchant-main-info">
                    <view class="merchant-name-row">
                      <text class="merchant-name">{{ merchant.name }}</text>
                      <view class="merchant-status" :class="{ 'closed': merchant.status !== 1 }">
                        <text class="status-text">{{ merchant.status === 1 ? '营业中' : '休息中' }}</text>
                      </view>
                    </view>
                    <view class="merchant-rating-row">
                      <text class="rating">⭐ {{ merchant.rating }}</text>
                      <text class="rating-count">({{ merchant.ratingCount }}评价)</text>
                    </view>
                  </view>
                </view>
                
                <!-- 商家信息 -->
                <view class="merchant-info-row">
                  <view class="info-item">
                    <text class="info-label">起送</text>
                    <text class="info-value">¥{{ merchant.minOrderAmount }}</text>
                  </view>
                  <view class="info-divider"></view>
                  <view class="info-item">
                    <text class="info-label">配送</text>
                    <text class="info-value">¥{{ merchant.deliveryFee }}</text>
                  </view>
                </view>
                
                <!-- 商家菜品预览 -->
                <view class="merchant-foods-preview">
                  <image 
                    v-for="(food, idx) in merchant.previewFoods" 
                    :key="idx"
                    :src="food.image"
                    mode="aspectFill"
                    class="preview-food-img"
                  />
                  <view class="more-foods" v-if="merchant.foodCount > 3">
                    <text class="more-text">{{ merchant.foodCount }}+</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
  
  <!-- 底部导航栏 -->
  <view class="bottom-nav">
    <view class="nav-item active" @click="goHome">
      <text class="nav-icon">🏠</text>
      <text class="nav-label">首页</text>
    </view>
    <view class="nav-item" @click="goGroupBuying">
      <text class="nav-icon">👥</text>
      <text class="nav-label">拼单</text>
    </view>
    <view class="nav-item" @click="goOrders">
      <text class="nav-icon">📦</text>
      <text class="nav-label">订单</text>
    </view>
    <view class="nav-item" @click="goProfile">
      <text class="nav-icon">👤</text>
      <text class="nav-label">我的</text>
    </view>
  </view>
  
  <!-- AI助手悬浮球 -->
  <AIFloatingButton @open-chat="showAIChat = true" />
  
  <!-- AI聊天弹窗 -->
  <AIChatModal :visible="showAIChat" @update:visible="showAIChat = $event" />
</template>

<script>
import authService from '../../services/auth.js'
import foodService from '../../services/food.js'
import api from '../../services/api.js'
import AIFloatingButton from '../../components/AIFloatingButton.vue'
import AIChatModal from '../../components/AIChatModal.vue'

export default {
  components: {
    AIFloatingButton,
    AIChatModal
  },
  data() {
    return {
      statusBarHeight: 0,
      // Tab切换
      currentTab: 0,
      // 数据加载状态
      loading: false,
      // 真实数据
      foodList: [],
      recommendList: [],
      merchantList: [],
      // AI助手
      showAIChat: false
    }
  },
  computed: {},
  onLoad() {
    this.getStatusBarHeight()
    this.checkAuth()
    this.loadHomeData()
    this.loadMerchantList()  // ⭐ 加载商家列表
  },
  mounted() {
    // 不再使用 JS 监听，改用纯 CSS 方案
  },
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
      document.documentElement.style.setProperty('--status-bar-height', this.statusBarHeight + 'px')
    },
    
    // 检查认证状态
    checkAuth() {
      const loginStatus = authService.checkLoginStatus()
      if (!loginStatus.isLoggedIn) {
        // 未登录，跳转到登录页
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    },
    
    // Tab切换
    switchTab(index) {
      this.currentTab = index
    },
    
    // Swiper滑动事件
    onSwiperChange(e) {
      this.currentTab = e.detail.current
    },
    
    // 加载首页数据（商品部分）
    async loadHomeData() {
      if (this.loading) return
      
      this.loading = true
      
      try {
        console.log('开始加载首页数据...')
        
        // 🚀 使用 /home 接口获取商品数据
        const response = await api.get('/home', {}, { needAuth: false })
        console.log('首页数据响应:', response)
        
        const data = response?.data || {}
        
        // 处理热门商品
        const hotFoods = data.hotFoods || []
        console.log('热门商品数据:', hotFoods)
        
        this.foodList = hotFoods.map(food => ({
          id: food.id,
          name: food.name,
          price: food.price,
          originalPrice: food.originalPrice || food.original_price,
          image: food.image || '/static/default-food.jpg',
          sold: food.soldCount || food.sold_count || 0,
          storeName: food.merchant?.name || food.merchantName || '未知商家',
          merchantLogo: food.merchant?.logo || food.merchantLogo || '',
          merchantId: food.merchantId || food.merchant?.id || 0,  // ⭐ 添加商家ID
          deliveryFee: food.deliveryFee || food.merchant?.deliveryFee || 0,  // ⭐ 添加配送费
          rating: food.rating || 5.0,
          description: food.description || ''
        }))
        
        // 处理推荐商品
        const recommendedFoods = data.recommendedFoods || []
        console.log('推荐商品数据:', recommendedFoods)
        
        this.recommendList = recommendedFoods.map(food => ({
          id: food.id,
          name: food.name,
          price: food.price,
          originalPrice: food.originalPrice || food.original_price,
          image: food.image || '/static/default-food.jpg',
          sold: food.soldCount || food.sold_count || 0,
          storeName: food.merchant?.name || food.merchantName || '未知商家',
          merchantLogo: food.merchant?.logo || food.merchantLogo || '',
          merchantId: food.merchantId || food.merchant?.id || 0,  // ⭐ 添加商家ID
          deliveryFee: food.deliveryFee || food.merchant?.deliveryFee || 0,  // ⭐ 添加配送费
          rating: food.rating || 5.0,
          description: food.description || ''
        }))
        
        // 如果没有推荐商品，用热门商品补充
        if (this.recommendList.length === 0 && this.foodList.length > 0) {
          this.recommendList = [...this.foodList]
        }
        
        console.log('处理后的热门商品:', this.foodList)
        console.log('处理后的推荐商品:', this.recommendList)
        
        uni.showToast({
          title: '数据加载成功',
          icon: 'success',
          duration: 1500
        })
        
      } catch (error) {
        console.error('加载首页数据失败:', error)
        
        uni.showToast({
          title: '数据加载失败，请稍后重试',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },
    
    // ⭐ 加载商家列表（独立接口）
    async loadMerchantList() {
      try {
        console.log('开始加载商家列表...')
        
        const response = await api.get('/merchants', {
          page: 1,
          size: 20,
          status: 1,        // 只获取营业中的商家
          sortBy: 'rating'  // 按评分排序
        }, { needAuth: false })
        
        console.log('商家列表响应:', response)
        
        if (response.code === 200) {
          const data = response.data
          
          // 处理商家数据
          this.merchantList = data.merchants.map(merchant => ({
            id: merchant.id,
            name: merchant.name,
            logo: merchant.logo || '/static/default-merchant.jpg',
            rating: merchant.rating || 5.0,
            ratingCount: merchant.ratingCount || 0,
            minOrderAmount: merchant.minOrderAmount || 0,
            deliveryFee: merchant.deliveryFee || 0,
            status: merchant.status,
            foodCount: merchant.foodCount || 0,
            previewFoods: (merchant.previewFoods || []).map(food => ({
              id: food.id,
              name: food.name,
              image: food.image || '/static/default-food.jpg'
            }))
          }))
          
          console.log('处理后的商家列表:', this.merchantList)
          
          uni.showToast({
            title: `加载${this.merchantList.length}家商家`,
            icon: 'success',
            duration: 1500
          })
        } else {
          throw new Error(response.message || '获取商家列表失败')
        }
      } catch (error) {
        console.error('加载商家列表失败:', error)
        
        uni.showToast({
          title: '商家列表加载失败',
          icon: 'none',
          duration: 2000
        })
      }
    },
    
    // 打开搜索页面
    openSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    
    // 处理美食点击
    handleFoodClick(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}` +
             `&merchantId=${item.merchantId}` +  // ⭐ 添加商家ID
             `&storeName=${encodeURIComponent(item.storeName)}` +
             `&name=${encodeURIComponent(item.name)}` +
             `&price=${encodeURIComponent(item.price)}` +
             `&originalPrice=${encodeURIComponent(item.originalPrice || '')}` +
             `&image=${encodeURIComponent(item.image)}` +
             `&deliveryFee=${item.deliveryFee}`  // ⭐ 添加配送费
      })
    },
    
    // 跳转到商家点餐页面
    goToMerchantMenu(merchant) {
      uni.navigateTo({
        url: `/pages/merchant-menu/merchant-menu?merchantId=${merchant.id}&merchantName=${encodeURIComponent(merchant.name)}`
      })
    },
    // 折扣计算：根据原价与现价动态生成功能，如 39.9/59.9 => 6.7折
    formatDiscount(item) {
      const p = parseFloat(item.price)
      const o = parseFloat(item.originalPrice)
      if (!o || !p || o <= 0) return ''
      const discount = Math.round((p / o) * 1000) / 100 // 保留1位小数
      return `${discount}折`
    },
    
    // 底部导航按钮
    goHome() {
      // 已经在首页，不执行跳转
      return
    },
    goGroupBuying() {
      uni.redirectTo({ url: '/pages/group-buying/group-buying' })
    },
    goOrders() {
      uni.redirectTo({ url: '/pages/orders/orders' })
    },
    goProfile() {
      uni.redirectTo({ url: '/pages/profile/profile' })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background: #f5f5f5;
  overflow: hidden;
  position: relative;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    padding: 12rpx 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    
    &:active {
      transform: scale(0.95);
    }
    
    .nav-icon {
      font-size: 44rpx;
      transition: all 0.3s ease;
      filter: grayscale(100%);
      opacity: 0.6;
    }
    
    .nav-label {
      font-size: 22rpx;
      color: #999;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    /* 选中状态 */
    &.active {
      .nav-icon {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
      }
      
      .nav-label {
        color: #667eea;
        font-weight: 600;
      }
      
      /* 选中指示器 */
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
      }
    }
  }
}
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 999;
}

/* Tab切换区域（移到顶部） */
.tab-section {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 998;
  
  .tab-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    
    .tab-text {
      font-size: 32rpx;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    .tab-indicator {
      position: absolute;
      bottom: 12rpx;
      width: 48rpx;
      height: 6rpx;
      background: #fff;
      border-radius: 3rpx;
      box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.3);
      animation: slideIn 0.3s ease;
    }
    
    &.active .tab-text {
      color: #fff;
      font-weight: 700;
      font-size: 36rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
}

/* 新搜索区域样式 */
.search-section-new {
  position: fixed;
  top: calc(var(--status-bar-height) + 100rpx);
  left: 0;
  right: 0;
  padding: 16rpx 30rpx 16rpx;
  background: #fff;
  z-index: 997;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .search-box-new {
    display: flex;
    align-items: center;
    height: 64rpx;
    background: #f5f5f5;
    border-radius: 32rpx;
    padding: 0 24rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      background: #ececec;
    }
    
    .search-icon-new {
      font-size: 28rpx;
      margin-right: 12rpx;
      opacity: 0.6;
    }
    
    .search-placeholder-new {
      flex: 1;
      font-size: 26rpx;
      color: #999;
    }
  }
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 48rpx;
    opacity: 1;
  }
}

/* Swiper容器（调整顶部距离） */
.content-swiper {
  margin-top: calc(var(--status-bar-height) + 100rpx + 96rpx);
  height: calc(100vh - var(--status-bar-height) - 100rpx - 96rpx - 120rpx);
  background: #f5f5f5;
  
  .scroll-content {
    height: 100%;
    background: #f5f5f5;
    -webkit-overflow-scrolling: touch;
    
    /* H5 特定样式 */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.flash-sale-section {
  background: #fff;
  padding: 30rpx;
  margin: 20rpx 20rpx;
  border-radius: 16rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-text {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .food-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    
    .food-item {
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .food-image {
        position: relative;
        width: 100%;
        height: 200rpx;
        
        .food-img {
          width: 100%;
          height: 100%;
          background: #f0f0f0;
        }
        
        .discount-tag {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
          background: #ff4757;
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          
          .discount-text {
            font-size: 20rpx;
            color: #fff;
            font-weight: 600;
          }
        }
      }
      
      .food-info {
        padding: 20rpx;
        
        .food-name {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .store-name {
          display: block;
          font-size: 22rpx;
          color: #999;
          margin-bottom: 8rpx;
        }
        
        .price-section {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          
          .current-price {
            font-size: 32rpx;
            font-weight: 700;
            color: #ff4757;
            margin-right: 10rpx;
          }
          
          .original-price {
            font-size: 24rpx;
            color: #999;
            text-decoration: line-through;
          }
        }
        
        .sale-info {
          .sale-count {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.recommend-section {
  background: #fff;
  padding: 30rpx;
  margin: 0 20rpx 20rpx 20rpx;
  border-radius: 16rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-text {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .recommend-list {
    .recommend-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      cursor: pointer;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background: #f8f8f8;
      }
      
      .recommend-image { position: relative; margin-right: 20rpx; }
      .recommend-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        background: #f0f0f0;
      }
      .recommend-image .discount-tag {
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        background: #ff4757;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
      }
      .recommend-image .discount-text { font-size: 20rpx; color: #fff; font-weight: 600; }
      
      .recommend-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .recommend-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .recommend-desc {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        
        .recommend-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .price-wrap { display: flex; align-items: baseline; gap: 10rpx; }
          .price {
            font-size: 30rpx;
            font-weight: 700;
            color: #ff4757;
          }
          .original-price { font-size: 22rpx; color: #999; text-decoration: line-through; }
          
          .rating {
            font-size: 24rpx;
            color: #ffa726;
          }
        }
        .store-name.small { margin-top: 6rpx; font-size: 22rpx; color: #999; }
      }
    }
  }
}

/* 加载和空状态样式 */
.loading-container, .empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0;
  
  .loading-text, .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 商家列表区域 */
.merchant-section {
  padding: 20rpx;
  padding-bottom: 30rpx;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding: 0 10rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-text {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .merchant-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    
    .merchant-card {
      background: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
      }
      
      /* 商家头部 */
      .merchant-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        
        .merchant-logo {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background: #f0f0f0;
          margin-right: 24rpx;
        }
        
        .merchant-main-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 12rpx;
          
          .merchant-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .merchant-name {
              font-size: 32rpx;
              font-weight: 600;
              color: #333;
              max-width: 300rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            .merchant-status {
              padding: 6rpx 16rpx;
              background: #e8f5e9;
              border-radius: 8rpx;
              
              .status-text {
                font-size: 22rpx;
                color: #4caf50;
                font-weight: 500;
              }
              
              &.closed {
                background: #ffebee;
                
                .status-text {
                  color: #f44336;
                }
              }
            }
          }
          
          .merchant-rating-row {
            display: flex;
            align-items: center;
            gap: 12rpx;
            
            .rating {
              font-size: 26rpx;
              color: #ffa726;
              font-weight: 600;
            }
            
            .rating-count {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
      
      /* 商家信息行 */
      .merchant-info-row {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-top: 1rpx solid #f0f0f0;
        border-bottom: 1rpx solid #f0f0f0;
        margin-bottom: 24rpx;
        
        .info-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8rpx;
          
          .info-label {
            font-size: 24rpx;
            color: #999;
          }
          
          .info-value {
            font-size: 28rpx;
            color: #667eea;
            font-weight: 600;
          }
        }
        
        .info-divider {
          width: 1rpx;
          height: 40rpx;
          background: #e0e0e0;
        }
      }
      
      /* 商家菜品预览 */
      .merchant-foods-preview {
        display: flex;
        align-items: center;
        gap: 16rpx;
        
        .preview-food-img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background: #f0f0f0;
        }
        
        .more-foods {
          width: 120rpx;
          height: 120rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          border-radius: 12rpx;
          border: 2rpx dashed #d0d0d0;
          
          .more-text {
            font-size: 28rpx;
            color: #999;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
